<template>
  <div id="findMessageAll">
    <div class="f-header">
      <h2 style="margin-left: 20px">用户管理</h2>
      <ul class="f-header-title">
        <router-link to="/homePageIndex" class="goBack">
          <li><i class="el-icon-discount"></i> 首页</li>
        </router-link>
        <li>/ 用户管理</li>
      </ul>
    </div>
    <div class="f-content">
      <div class="f-content-ft">
        <el-button class="addMsg" @click="addMsg"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
        <el-button class="getMsgAll" @click="findMsgAll"
          ><i class="el-icon-refresh"></i>刷新</el-button
        >
        <input
          type="search"
          class="f-content-search"
          placeholder=" 按工号查找"
          v-model="getByEmpCode_in"
        />
        <p class="f-content-search-pic" @click="findSearch">
          <i class="el-icon-search"></i>
        </p>
      </div>
      <div class="f-content-table">
            <el-table :data="tableData" class="f_continer_table_O">
                <el-table-column prop="empId" label="员工ID" width="150"></el-table-column>
                <el-table-column prop="empCode" label="员工工号" width="150"></el-table-column>
                <el-table-column prop="empName" label="员工姓名" width="150"></el-table-column>
                <el-table-column prop="sex" label="员工性别" width="150"></el-table-column>
                <el-table-column prop="age" label="年龄" width="150"></el-table-column>
                <el-table-column prop="departmentId" label="部门ID" width="150"></el-table-column>
                <el-table-column prop="phone" label="电话号码" width="150"></el-table-column>
            </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getByEmpCode } from '../../api/user'

export default {
  name: "FindMessageAll",
  data() {
    return {
      tableData: [],
      getByEmpCode_in:''
    };
  },
  methods: {
    addMsg(){},
    findMsgAll(){
      
    },
    findSearch(){
      getByEmpCode(this.getByEmpCode_in).then((res) => {
        this.tableData=res.data.data
      })
    }
  },
  mounted(){
    
  }
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#findMessageAll {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1270px;
  height: 690px;
  /* background-color: hotpink; */
}
.f-header {
  position: relative;
  width: 1270px;
  height: 60px;
  line-height: 60px;
  /* background-color: rgb(247, 146, 146); */
}
.f-header-title {
  list-style: none;
}
.goBack {
  text-decoration: none;
}
.f-header .f-header-title li {
  position: relative;
  height: 50px;
  line-height: 50px;
  /* background-color: chartreuse; */
}
.f-header .f-header-title li:nth-child(1) {
  top: -55px;
  left: 1090px;
  width: 60px;
  font-size: 18px;
  color: #080808;
  font-weight: bold;
}
.f-header .f-header-title li:nth-child(1):hover {
  color: #00c0ff;
}
.f-header .f-header-title li:nth-child(2) {
  top: -105px;
  left: 1160px;
  width: 80px;
  font-weight: bold;
  color: gray;
}

.f-content {
  position: relative;
  left: 20px;
  width: 1220px;
  height: 600px;
  border: 2px solid rgb(197, 196, 196);
  border-top: 5px solid rgb(179, 177, 177);
  border-radius: 5px;
  /* background-color: gray; */
}
.f-content-ft {
  height: 45px;
  line-height: 45px;
  border-bottom: 2px solid rgb(194, 193, 193);
  /* background-color: indianred; */
}
.addMsg {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  margin-left: 20px;
  background-color: #22b86c;
}
.getMsgAll {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  background-color: #22b86c;
}
.f-content-search {
  position: relative;
  top: 0px;
  left: 850px;
  width: 150px;
  height: 30px;
  border-radius: 5px 0px 0px 5px;
  border: 1px solid gray;
}
.f-content-search-pic {
  position: relative;
  top: -36px;
  left: 1170px;
  width: 30px;
  height: 29px;
  text-align: center;
  line-height: 30px;
  border: 1px solid gray;
  border-left: none;
  border-radius: 0px 5px 5px 0px;
  background-color: rgb(247, 242, 242);
}
.f-content-search-pic:hover {
  background-color: rgb(221, 150, 150);
}

.f-content-table {
  width: 1200px;
  height: 520px;
  position: relative;
  top: 15px;
  left: 10px;
  /* background-color: rgb(209, 208, 208); */
}
</style>